<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<%@ page import="com.ws.utils.Res" %><%--
  Created by IntelliJ IDEA.
  User: lufei
  Date: 2025/3/22
  Time: 09:08
  To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" isELIgnored="false" %>
<html>
<head>
    <title>${user.user_name}的个人主页</title>
    <style>
        .container {
            max-width: 1200px;
            margin: 0 auto;
            padding: 20px;
            font-family: 'Segoe UI', Arial, sans-serif;
        }

        .profile-header {
            display: flex;
            align-items: center;
            margin-bottom: 30px;
            background: #f8f9fa;
            padding: 20px;
            border-radius: 10px;
        }

        .avatar {
            width: 150px;
            height: 150px;
            border-radius: 50%;
            margin-right: 30px;
            border: 3px solid #007bff;
        }

        .profile-info h1 {
            margin: 0;
            color: #333;
        }

        .stats {
            display: flex;
            gap: 20px;
            margin-top: 10px;
        }

        .stat-item {
            text-align: center;
        }

        .nav-menu {
            margin-bottom: 30px;
            background: #f8f9fa;
            padding: 15px;
            border-radius: 8px;
        }

        .nav-menu a {
            margin-right: 25px;
            text-decoration: none;
            color: #007bff;
            font-weight: 500;
        }

        .content-section {
            display: grid;
            grid-template-columns: 3fr 9fr;
            gap: 30px;
        }

        .sidebar {
            background: #f8f9fa;
            padding: 20px;
            border-radius: 8px;
        }

        .dynamic-list {
            background: white;
            padding: 20px;
            border-radius: 8px;
            box-shadow: 0 2px 4px rgba(0,0,0,0.1);
        }

         /*添加 collection-item 样式*/
        .collection-item {
            margin-bottom: 10px;
            padding: 10px;
            background-color: #fff;
            border: 1px solid #ddd;
            border-radius: 5px;
        }
    </style>
</head>
<body>
<a href="${pageContext.request.contextPath}/qianTai/toindex"
   style="display: inline-block;
                  margin-top: 15px;
                  padding: 8px 20px;
                  background: #007bff;
                  color: white !important;
                  border-radius: 5px;
                  text-decoration: none;
                  transition: background 0.3s;">
    🏠 返回首页
</a>
<div class="container">
    <div class="profile-header">
        <img src="<%=Res.fileUrl%>${user.user_tx}"  class="avatar">
        <div class="profile-info">
            <h1>用户名：${user.user_name}</h1>
            <p> 生  日：${user.user_date}</p>
            <%-- 新增收藏链接 --%>
            <a href="#mesc"
               style="display: inline-block;
                  margin-top: 15px;
                  padding: 8px 20px;
                  background: #28a745;
                  color: white !important;
                  border-radius: 5px;
                  text-decoration: none;
                  transition: background 0.3s;"">
                📌 我的收藏
            </a>
        </div>
    </div>
    <div class="sidebar">
        <h3>个人信息</h3>
        <form action="${pageContext.request.contextPath}/qianTai/update" method="post" enctype="multipart/form-data">
            <input type="hidden" name="user_id" value="${user.user_id}">
            <div style="margin-bottom: 15px;">
                <label>用户名：</label>
                <input type="text" name="user_name" value="${user.user_name}"
                       class="form-input" style="width: 100%; padding: 8px;">
            </div>
            <div style="margin-bottom: 15px;">
                <label>密码：</label>
                <input type="password" name="user_pass" value="${user.user_pass}"
                       class="form-input" style="width: 100%; padding: 8px;">
            </div>
            <div style="margin-bottom: 15px;">
                <label>手机号：</label>
                <input type="text" name="user_phone" value="${user.user_phone}"
                       class="form-input" style="width: 100%; padding: 8px;">
            </div>
            <div style="margin-bottom: 15px;">
                <label>生日：</label>
                <input type="date" name="user_date" value="${user.user_date}"
                       class="form-input" style="width: 100%; padding: 8px;">
            </div>
            <div style="margin-bottom: 15px;">
                <label>头像：</label>
                <img src="<%=Res.fileUrl%>${user.user_tx}" width="100px" height="100px">
                <input type="file" name="image" class="form-input" style="width: 100%; padding: 8px;">
                <input type="hidden" class="form-control" name="tx" value="${user.user_tx}">
            </div>
            <input type="submit" class="submit-btn" value="更新资料" style="background: #007bff; color: white; padding: 10px 20px; border: none; border-radius: 5px;" >
        </form>
    </div>
    <div id="mesc" style="margin-top: 10px; background-color: #f7f7f8 ;height: 100%;" >
        <h3 style="margin-left: 10px;">我的收藏</h3>
        <c:forEach items="${list}" var="r">
            <div class="collection-item" style="position: relative">
                <a href="${pageContext.request.contextPath}/qianTai/toxiangqing?route_id=${r.routes.route_id}" style="color: #007bff;text-decoration: none; ">${r.routes.route_name}
                    <br>
                    <img src="<%=Res.fileUrl%>${r.routes.route_image}" width="100px" height="100px">
                </a>
                <a href="${pageContext.request.contextPath}/qianTai/deleteFavorite?route_id=${r.routes.route_id}" style="color:red;position: absolute;right: 10px;top: 10px;">取消收藏</a>
            </div>
        </c:forEach>
    </div>
</div>
</body>
</html>